<template>
  <view class="detailPage">
    <!-- 标题 -->
    <shopro-navbar
      back-icon-color="#020202"
      :background="{ background: '#fff' }"
      @backHandler="goBack"
      :backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
      :isBack="true">
      <view slot="content" class="u-flex nav-wrap">
        <view class="nav-item">活动详情</view>
      </view>
    </shopro-navbar>
    <view class="card">
      <view class="acttitle">{{ detajs.title }}</view>
      <view class="acttime">{{ detajs.time_text }}</view>
      <image class="imgs" :src="detajs.image" mode="widthFix"></image>
      <view class="actContent" v-html="detajs.project_content"></view>
    </view>

    <view class="sure" @click="hanldshow">报名</view>
    <!-- 报名 -->
    <u-mask :show="signshow">
      <view class="maskbox">
        <view class="titlebox">
          <view class="masktitle">报名信息</view>
          <image
            class="close"
            @click="signshow = false"
            src="/static/images/finance/close.png"
            mode="widthFix"></image>
        </view>
        <view class="search u-flex">
          联系人
          <u-input
            class="searchipt"
            :clearable="false"
            style="margin-left: 20rpx"
            v-model="name"
            border
            placeholder="请输入姓名" />
        </view>
        <view class="search u-flex">
          手机号
          <u-input
            class="searchipt"
            :clearable="false"
            style="margin-left: 20rpx"
            v-model="tel"
            border
            placeholder="请输入手机号" />
        </view>
        <view class="sure" @click="submits">确定</view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "",
      current: 0,
      collect: true,
      show: false,
      currId: 0,
      detajs: {},
      dataList: [],
      newID: "",
      signshow: false,
      name: "",
      tel: "",
    };
  },
  props: {},
  onLoad(options) {
    this.newID = options.id;
    console.log(options);
    this.getDetail(options);
  },
  computed: {},
  created() {},
  onShow() {
    // this.getDetail();
  },
  methods: {
    getDetail(val) {
      this.$new_http("finance.activedetail", {
        id: val.id,
      }).then((res) => {
        this.detajs = res.data;
        console.log(res, 9);
      });
    },
    change(index) {
      this.current = index;
    },
    handleDetail(val) {
      uni.navigateTo({
        url: "/pages/finance/detail?val=" + JSON.stringify(val),
      });
    },
    // 查看更多
    goMore(val) {
      uni.navigateTo({
        url: "/pages/finance/more?type=" + val,
      });
    },
    getStatus() {
      this.collect = !this.collect;
    },
    // 成为会员
    gocome(index) {
      this.currId = index;
    },
    hanldshow() {
      this.signshow = true;
    },
    submits() {
      // activeSign
      if (!this.name) {
        return uni.showToast({
          title: "请输入姓名",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      }
      const regex = /^1[3-9]\d{9}$/; // 以1开头，后面跟10位数字
      if (!regex.test(this.tel)) {
        return uni.showToast({
          title: "请输入正确手机号",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      }
      this.$new_http("finance.activeSign", {
        name: this.name,
        mobile: this.tel,
        act_id: this.newID,
      }).then((res) => {
        if (res.code == "1") {
          uni.showToast({
            title: "报名成功",
            icon: "success",
            duration: 1000,
            mask: true,
          });
          this.signshow = false;
          this.name = "";
          this.tel = "";
        }
      });
    },
  },
};
</script>

<style lang="scss">
.detailPage {
  background: #f7f7f7;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .nav-wrap {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    width: 100%;
	  font-size: 32rpx;
  }

  .card {
    width: 100%;
    // height: 390rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding-top: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 34rpx;
    margin-top: 2rpx;
    .acttitle {
      font-family: Source Han Sans SC;
      font-weight: bold;
      font-size: 42rpx;
      color: #000000;
      margin-top: 45rpx;
      text-align: center;
    }
    .acttime {
      margin-top: 21rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 26rpx;
      color: #666666;
      text-align: center;
    }
    .imgs {
      width: 100%;
      margin-top: 29rpx;
    }
    .actContent {
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 30rpx;
      color: #666666;
      line-height: 42rpx;
      margin-top: 28rpx;
    }
    .introduce {
      margin-top: 34rpx;
      font-family: PingFang;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 44rpx;
      text-align: justify;
    }
  }

  .curriculum {
    width: 100%;
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .curriculumList {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #666666;
      border-bottom: 2rpx #f0f0f0 solid;
      padding: 42rpx 36rpx;

      .imgs {
        width: 34rpx;
        margin-right: 15rpx;
      }
    }
  }

  .sure {
    text-align: center;
    width: 90%;
    height: 88rpx;
    background: #ed861f;
    border-radius: 44rpx;
    margin: 100rpx auto;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 92rpx;

    .money {
      font-size: 36rpx;
      margin-right: 20rpx;
      font-weight: 500;
    }
  }
  // 盒子
  .maskbox {
    width: 90%;
    // height: 990rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .titlebox {
      position: relative;
    }

    .masktitle {
      font-family: PingFang;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      text-align: center;
      margin-top: 61rpx;
    }

    .close {
      width: 25rpx;
      position: absolute;
      right: 48rpx;
      top: 5rpx;
    }

    .daili {
      font-family: PingFang;
      font-weight: bold;
      font-size: 30rpx;
      color: #000000;
      padding: 0 99rpx;
      margin-top: 56rpx;

      .dalibottom {
        display: flex;
        justify-content: space-between;
        margin-top: 36rpx;
      }

      .smalldl {
        width: 220rpx;
        height: 110rpx;
        background: #ffffff;
        border-radius: 12rpx;
        border: 2rpx solid #d5d5d5;
        font-weight: 400;
        font-size: 30rpx;
        color: #191919;
        text-align: center;
        line-height: 50rpx;
      }

      .activebr {
        border: 2rpx solid #ed861f;
      }
    }
    .search {
      font-weight: normal;
      font-size: 30rpx;
      color: #191919;
      width: 80%;
      margin: 80rpx auto 0;
    }
    .sure {
      width: 360rpx;
      height: 76rpx;
      background: #ed861f;
      border-radius: 16rpx;
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 76rpx;
      margin: 70rpx auto 54rpx;
    }
  }
}
</style>
